<template>
  <view class="coupon-card">
    <view class="stat-txt">
      当前状态: <text>{{ info.father_id == 0 ? "在网" : "离网" }}</text>
      <text v-if="info.father_id == 0 && info.updateStatus == 0" @tap="showInput = true"
        >（填写邀请码）</text
      >
      <text class="qco">{{queryCode}}</text>
    </view>
    <view class="card-body">
      <view class="coupon-section" v-if="referralCode">
        <view class="section-title">
          <text>推荐码</text>
        </view>
        <view class="coupon-group referral-code-group">
          <view class="code-container">
            <text class="code-text">{{ referralCode }}</text>
            <view class="share-hint">
              <text class="share-text">点击分享推荐码</text>
            </view>
          </view>
          <button class="sh-btn" open-type="share">
            <image :src="friend" class="friend" />
          </button>
        </view>
      </view>

      <!-- Rest of your template remains the same -->
      <view class="coupon-section">
        <view class="section-title">消费券</view>
        <view class="coupon-group">
          <view class="coupon-item" @tap="jumpBalance('A')">
            <view class="coupon-type">消费券A</view>
            <view class="coupon-value">{{ info.balanceA || 0 }}元</view>
          </view>
          <view class="coupon-item" @tap="jumpBalance('B')">
            <view class="coupon-type">消费券B</view>
            <view class="coupon-value">{{ info.balanceB || 0 }}元</view>
          </view>
        </view>
      </view>

      <view class="coupon-section">
        <view class="section-title">折扣券</view>
        <view class="coupon-group">
          <view class="coupon-item" @tap="jump('A')">
            <view class="coupon-type">可用折扣券</view>
            <view class="coupon-value">{{ info.deduction_balance || 0 }}</view>
          </view>
          <view class="coupon-item" @tap="jump('B')">
            <view class="coupon-type">冻结折扣券</view>
            <view class="coupon-value">{{ info.deduction_freeze || 0 }}</view>
          </view>
        </view>
      </view>
    </view>

    <nut-popup v-model:visible="showInput">
      <view class="popup-contents">
        <view class="title">填写推荐码</view>
        <view class="input-item">
          <input
            class="input"
            type="text"
            placeholder="请输入推荐码"
            v-model="otherCode"
          />
        </view>
        <view class="button-group">
          <nut-button class="buttons" @tap="showInput = false">取消</nut-button>
          <nut-button class="buttons" @tap="setCode" type="primary"
            >确定</nut-button
          >
        </view>
      </view>
    </nut-popup>
  </view>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, toRefs } from "vue";
import { store } from "@/store/index";
import Taro from "@tarojs/taro";
import http from "@/utils/http";

import friend from "@/assets/imgs/friend.svg";

const showInput = ref(false);
const otherCode = ref("");

const params = Taro.getCurrentInstance().router?.params;
console.log("params -----------", params);
// 直接使用store.storeState，不要解构以保持响应式
const info = store.storeState.info;
const user = store.storeState.user;
console.log("info", info);
console.log("user", user);
const queryCode = ref(params?.code || "无");

const fillCode = () => {
  // 弹窗填写推荐码，点击确定打印推荐码
  showInput.value = true;
};

const setCode = () => {
  console.log(otherCode.value);
  http
    .postQuery("/api/user/updatereferral", {
      referralCode: otherCode.value,
    })
    .then((res) => {
      if (res.code === 0) {
        Taro.showToast({
          title: "设置成功",
          icon: "success",
        });
      } else {
        Taro.showToast({
          title: res.data,
          icon: "error",
        });
      }
    });
};

const shareLink = () => {
  // const shareContent = {
  //   title: "自定义分享标题",
  //   path: "/pages/my/index?code=" + referralCode.value,
  //   imageUrl: "https://example.com/share-image.jpg",
  // };
  // Taro.shareAppMessage(shareContent)
  //   .then(() => {
  //     console.log("分享已触发");
  //   })
  //   .catch((err) => {
  //     console.error("分享失败", err);
  //   });
};

Taro.showShareMenu({
  withShareTicket: true,
  menus: ["shareAppMessage"], // 启用好友分享
});

const onShareAppMessage = () => {
  console.log("onShareAppMessage");
  return {
    title: "自定义分享标题",
    path: "/pages/my/index?share=1&code=" + referralCode.value,
    imageUrl: "https://docs.taro.zone/img/logo-taro.png",
  };
};

const referralCode = computed(() => {
  console.log("referralCode ###", user.value);
  if (!info.value.name) {
    return "";
  }
  return info.value.referralCode;
});

const jump = (type) => {
  Taro.navigateTo({
    url: "/pages-detail/coupon/index?type=" + type,
  });
};

const jumpBalance = (type) => {
  Taro.navigateTo({
    url: "/pages-detail/balance/index?type=" + type,
  });
};

onMounted(() => {});
</script>

<style lang="scss">
.coupon-card {
  width: 750rpx;
  overflow: hidden;
  color: #dd5353;
  position: relative;
  margin: 0 auto;

  .stat-txt {
    padding: 12rpx 30rpx;
    margin: 10rpx auto;
    background: #ee590929;
    font-size: 24rpx;
    color: #333;
    width: 690rpx;
    box-sizing: border-box;
    border-radius: 4rpx;
  }

  .s-my {
    margin-left: auto;
  }

  .card-header {
    padding: 40rpx;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .card-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #dd5353;
  }

  .card-body {
    padding: 40rpx;
  }

  .coupon-section {
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-title {
    padding: 30rpx 0;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    border-bottom: 1rpx solid #f5f5f5;
    display: flex;
    align-items: center;

    &:before {
      content: "";
      display: inline-block;
      width: 8rpx;
      height: 28rpx;
      background: var(--nut-primary-color);
      margin-right: 16rpx;
      border-radius: 4rpx;
    }
  }

  .coupon-group {
    display: flex;
    background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
    border-radius: 20rpx;
    overflow: hidden;
  }

  .coupon-item {
    flex: 1;
    padding: 30rpx;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;

    &:not(:last-child):after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 60%;
      width: 1px;
      background: rgba(255, 255, 255, 0.1);
    }

    &:active {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  .coupon-type {
    font-size: 28rpx;
    color: #bbbbbb;
    margin-bottom: 16rpx;
  }

  .coupon-value {
    font-size: 40rpx;
    font-weight: bold;
    color: var(--nut-primary-color);
  }

  .card-footer {
    padding: 30rpx 40rpx;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 24rpx;
    color: #aaaaaa;
  }

  // 新增的推荐码样式
  .referral-code-group {
    background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%);
    border-radius: 20rpx;
    padding: 30rpx 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .friend {
      width: 180rpx;
      height: 180rpx;
    }

    .code-container {
      display: flex;
      flex-direction: column;
      align-items: center;

      .code-text {
        color: #fff;
        font-size: 48rpx;
        font-weight: bold;
        padding: 24rpx 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        padding: 18rpx 40rpx;
        border-radius: 12rpx;
        background: rgba(255, 255, 255, 0.2);
      }

      .share-hint {
        margin-top: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .share-text {
          color: rgba(255, 255, 255, 0.9);
          font-size: 32rpx;
          margin-bottom: 8rpx;
        }

        .share-icon {
          color: rgba(255, 255, 255, 0.7);
          font-size: 28rpx;
        }
      }
    }
  }

  .popup-contents {
    width: 600rpx; // 略小于设计稿宽度，留出边距
    border-radius: 20rpx;
    padding: 40rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);

    .title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      text-align: center;
      margin-bottom: 40rpx;
    }

    .input-item {
      margin-bottom: 40rpx;

      .input {
        width: 100%;
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        color: #333;

        &::placeholder {
          color: #bbbbbb;
          font-size: 28rpx;
        }
      }
    }

    .button-group {
      display: flex;
      justify-content: space-between;

      .buttons {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 8rpx;
        font-size: 30rpx;

        &:not(:last-child) {
          margin-right: 20rpx;
        }
      }
    }
  }

  .sh-btn {
    background: transparent !important;
  }
  .qco{
    margin-left: 20rpx;
    color: #d76d77;
  }
}
</style>
